<!-- TeamCard 组件 params: bg: 背景图片 @String title: 底部文字描述 @String -->
<template>
    <div
        :isSelected="this.isSelected"
        :data-id="this.id"
        :data-countryId="this.countryId"
        :data-cityId="this.cityId"
        :data-viewsId="this.viewsId"
        @click="changeSelectedState()">
        <div class="card card-default" @click="setVerify()" v-if="type == 'default'">
            <img v-lazy="bg"/>
            <div class="corner"></div>
            <div class="footer footer-default-white">
                <p>{{ this.title }}</p>
            </div>
        </div>
        <div
            class="card card-default"
            v-else-if="type == 'video-list'"
            @click="toVideoDetail">
            <img v-lazy="bg"/>
            <div class="corner"></div>
            <div class="footer footer-default-white">
                <p>{{ this.date + ' ' + this.title }}</p>
            </div>
        </div>
        <div
            class="card card-default"
            v-else-if="type == 'video-list-check'">
            <img v-lazy="bg" />
            <div class="corner"></div>
            <div class="footer footer-default-white">
                <p>{{ this.title }}</p>
            </div>
            <div class="check-btn" :class="{ 'check-btn-selected': this.isSelected }"></div>
        </div>
        <div class="card card-waterfall" v-else-if="type == 'waterfall'" @click="toPhotoDetail" :data-id="this.id">
            <img v-lazy="bg"/>
            <div class="corner"></div>
            <div class="footer footer-waterfall">
                <span class="title">{{ this.title }}
                </span>
                <span class="date">{{this.date}}</span>
            </div>
        </div>
        <div class="card card-waterfall" v-else-if="type == 'waterfall-check'">
            <img v-lazy="bg"/>
            <div class="corner"></div>
            <div class="footer footer-waterfall">
                <span class="title">{{ this.title }}
                </span>
                <span class="date">{{this.date}}</span>
            </div>
            <div class="check-btn" :class="{ 'check-btn-selected': this.isSelected }"></div>
        </div>
        <div
            class="card card-city"
            v-else-if="type == 'city-list'"
            @click="toCity">
            <img v-lazy="bg" />
            <div class="footer footer-city">
                <p>{{ this.title }}</p>
            </div>
        </div>
        <div class="shade" v-if="this.showVerify" @click="setVerify()"></div>
        <div class="phone-verify" v-if="this.showVerify">
            <h4>输入手机号查看团队</h4>
            <input type="tel" maxlength="11" v-model="tel"/>
            <div class="btns">
                <a href="javascript:;" class="btn-base" @click="contact()">联系客服</a>
                <a href="javascript:;" class="btn-base btn-bla-bg" @click="submit()">确定</a>
            </div>
        </div>
        <div v-transfer-dom>
            <x-dialog
                v-model="isShowContact"
                hide-on-blur="hide-on-blur"
                :dialog-style="{'max-width': '100%', width: '100%', height: '', 'background-color': 'transparent'}">
                <p style="color:#fff;text-align:center;">
                    <p style="font-size:2.6rem; color: #fff">请微信联系客服</p>
                    <img v-lazy="imgCode" class="codeImg"/>
                    <br/>
                    <x-button
                        :gradients="['#1D62F0', '#19D5FD']"
                        style="width: 50%; margin: 1rem auto;"
                        v-clipboard:copy="wechatNumber"
                        v-clipboard:success="onCopy">复制微信号</x-button>
                    <x-icon
                        type="ios-close-outline"
                        style="fill:#fff;"
                        @click="isShowContact = false"></x-icon>
                </p>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    import {XButton, CheckerItem, XDialog, AlertModule, TransferDomDirective as TransferDom} from 'vux'
    import {Util} from '@/js/Util'
    import imgCode from '@/assets/code.jpg'

    'use strict';
    export default {
        name: 'Card',
        directives: {
            TransferDom
        },
        components: {
            XButton,
            CheckerItem,
            XDialog,
            XButton
        },
        data() {
            return {showVerify: false, tel: '', isSelected: false, isShowContact: false, imgCode: imgCode, wechatNumber: 'meijing_cool'}
        },
        methods: {
            verify() {
                this.tel = Util.trim(this.tel);
                if(!this.tel) {
                    return '请输入手机号';
                }
                if(!Util.verifyPhone(this.tel)) {
                    return '手机号格式有误';
                }
                return false;
            },
            setVerify() {
                this.showVerify == true
                    ? this.showVerify = false
                    : this.showVerify = true;
            },
            contact() {
                this.isShowContact = true;
            },
            submit() {
                let verify = this.verify();
                if (!verify) {
                    this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                    // 手机号格式正确 发送请求判断是否为属于该团队
                    this.$http.get('team/ConfirmPhone/v1?teamId=' + this.id + '&phone=' + this.tel).then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if(result.data) {
                            // 验证成功
                            sessionStorage.setItem('MeiJingKu_teamPhone', this.tel);
                            this.$router.push({
                                name: 'photo',
                                query: {
                                    id: this.id
                                }
                            });
                        }else {
                            this.$vux.toast.text('该团队不存在此手机号', 'bottom');
                        }
                    }, response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        AlertModule.show(
                            {title: '系统提示', content: 'Ajax请求失败，请刷新重试或联系管理员', onShow() {}, onHide() {}}
                        );
                    });
                } else {
                    this.$vux.toast.text(verify, 'bottom')
                }
            },
            changeSelectedState() {
                this.isSelected == true
                    ? this.isSelected = false
                    : this.isSelected = true;
            },
            onCopy() {
                this.$vux.toast.text('已复制到剪贴板', 'bottom');
            },
            toVideoDetail() {
                // 保存详细信息
                let datas = {
                    openid: sessionStorage.getItem('MeiJingKu_openid') + '',
                    title: this.title,
                    message: 'by 美景库 ' + new Date().getFullYear() + '-' + parseInt(new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
                    picture: this.bg
                };
                Util.setSession(datas, 'MeiJingKu_history');
                this.$router.push({
                    name: 'video_detail',
                    query: {
                        id: this.id
                    }
                });
            },
            toPhotoDetail() {
                // 保存详细信息
                let datas = {
                    openid: sessionStorage.getItem('MeiJingKu_openid') + '',
                    title: this.title,
                    message: 'by 美景库 ' + new Date().getFullYear() + '-' + parseInt(new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
                    picture: this.bg
                };
                Util.setSession(datas, 'MeiJingKu_history');
                this.$router.push({
                    name: 'photo_detail',
                    query: {
                        id: this.id
                    }
                });
            },
            toCity() {
                switch(parseInt(this.operate)) {
                    // to city
                    case 0:
                        this.$router.push({
                            name: 'juejia_city',
                            query: {
                                countryId: this.countryId,
                                country: this.title
                            }
                        });
                        break;
                    case 1:
                        // 保存详细信息
                        let data = {
                            openid: sessionStorage.getItem('MeiJingKu_openid') + '',
                            title: this.title + '风景',
                            message: 'by 绝佳美景 ' + new Date().getFullYear() + '-' + parseInt(new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
                            picture: this.bg
                        };
                        Util.setSession(data, 'MeiJingKu_history');
                        this.$router.push({
                            name: 'juejia_detail',
                            query: {
                                countryId: this.$route.query.countryId,
                                country: this.$route.query.country,
                                city: this.$route.query.city,
                                cityId: this.$route.query.cityId,
                                viewsId: this.viewsId,
                                views: this.title,
                            }
                        });
                        break;
                    case 2:
                        this.$router.push({
                            name: 'juejia_views',
                            query: {
                                countryId: this.$route.query.countryId,
                                country: this.$route.query.country,
                                cityId: this.cityId,
                                city: this.title
                            }
                        });
                        break;
                }

            }
        },
        props: {
            bg: {},
            title: {},
            date: {},
            type: {
                default: 'default'
            },
            id: {
                default: ''
            },
            countryId: {
                default: ''
            },
            cityId: {
                default: ''
            },
            viewsId: {
                default: ''
            },
            link: {
                default: ''
            },
            operate: {
                default: 0
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    @footerDefaultHeight: 4rem;
    @footerWaterfallHeight: 3rem;

    .card {
        display: block;
        border-radius: 0.5rem;
        border: 0.1rem solid #ccc;
        position: relative;
        box-shadow: 0 0 0.2rem 0.2rem #ccc;
        background-size: 100% 100% !important;
        margin: 1.5rem auto;

        .footer {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;

            p {
                font-size: 1.4rem;
                width: 90%;
                margin: 0 auto;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .title {
                font-size: 1.2rem;
                display: inline-block;
                width: 45%;
                margin-left: 2%;
                line-height: @footerWaterfallHeight;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .date {
                display: inline-block;
                float: right;
                width: 50%;
                text-align: right;
                margin-right: 3%;
                color: #ccc;
                font-size: 1.0rem;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                line-height: @footerWaterfallHeight;
            }
        }
    }

    .card-city {
        width: 95%;
        height: 15rem;
        position: relative;

        img {
            width: 100%;
            height: 100%;
        }

        .footer-city {
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 75%;
            height: 6rem;
            background: rgba(255, 255, 255, .85);

            p {
                text-align: center;
                font-size: 2.2rem;
                line-height: 6rem;
                color: #666;
            }
        }
    }

    .card-waterfall {
        width: 45%;
        margin: 1rem 2%;
        height: 100%;
        float: left;
        position: relative;

        .check-btn {
            position: absolute;
            width: 2rem;
            height: 2rem;
            background: #fff;
            right: -1rem;
            top: -1rem;
            border-radius: 1rem;
            border: 0.1rem solid #aaa;
        }

        .check-btn-selected {
            background: url("../assets/selected-btn.png") no-repeat -.2rem -.2rem;
            background-size: 120% 120%;
        }

        img {
            width: 100%;
        }

        .footer-waterfall {
            background: rgba(0, 0, 0, .75);
            height: @footerWaterfallHeight;
            color: #fff;
        }
    }

    .card-default {
        width: 85%;
        height: 20rem;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .check-btn {
            position: absolute;
            width: 2rem;
            height: 2rem;
            background: #fff;
            right: -1rem;
            top: -1rem;
            border-radius: 1rem;
            border: 0.1rem solid #aaa;
        }

        .check-btn-selected {
            background: url("../assets/selected-btn.png") no-repeat -.2rem -.2rem;
            background-size: 120% 120%;
        }

        .corner {
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-bottom: 1rem solid #fff;
            border-left: 1rem solid transparent;
            border-right: 1rem solid transparent;
            position: absolute;
            left: 20%;
            bottom: @footerDefaultHeight;
        }

        .footer-default-white {
            background: #fff;
            height: @footerDefaultHeight;

            p {
                line-height: @footerDefaultHeight;
            }
        }
    }

    .shade {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
    }

    .phone-verify {
        width: 90%;
        height: 20rem;
        display: block;
        position: fixed;
        z-index: 999;
        background: #fff;
        margin: auto;
        top: 25%;
        left: 0;
        right: 0;
        border-radius: 1rem;

        h4 {
            text-align: center;
            line-height: 8rem;
            font-weight: 500;
            font-size: 1.6rem;
        }

        input[type=tel] {
            width: 75%;
            display: block;
            margin: 0 auto;
            font-size: 1.8rem;
            padding: 1rem 0;
            border-radius: 1rem;
            border: 0.1rem solid #aaa;
            text-align: center;
        }

        .btn-base {
            text-decoration: none;
            padding: 0.2rem 0.5rem;
            width: 8rem;
            display: inline-block;
            text-align: center;
            border: 0.1rem solid #111;
            border-radius: 0.5rem;
            margin: 0 0.5rem;
            color: #111;
            font-size: 1.4rem;
        }

        .btn-bla-bg {
            background: #111;
            color: #fff;
        }

        .btns {
            width: 100%;
            display: block;
            margin: 2rem auto;
            text-align: center;
        }
    }

    .codeImg {
        width: 50%;
    }
</style>